<template>
  <view class="x-search">
    <view class="header x-container">
      <uni-easyinput suffixIcon="search" placeholder-style="font-size: 28rpx" v-model="state.keyword" placeholder="请输入手机号搜索" @iconClick="onSearch"></uni-easyinput>
      <view class="x-space-between select-item">
        <x-choose @onChange="onChange('status', $event)" v-model="state.status" label="全部状态" :options="[{label: '全部状态', value: ''}].concat(props.statusOption)"></x-choose>
<!--        <x-choose label="全部成员" :options="[{label: '123', value: 1}]"></x-choose>-->
        <x-choose @onChange="onChange('time', $event)" v-model="state.timeSlot" label="本月" :options="[{label: '全部', value: ''}].concat(TIME_SLOT)"></x-choose>
      </view>
    </view>
  </view>
</template>

<script setup>
import XChoose from '@/components/lib/choose';
import {reactive} from "vue";
import {Helper} from "core";

const props = defineProps({
  statusOption: {
    type: Array,
    default: () => {return []}
  }
})
const state = reactive({
  keyword: "",
  status: "",
  timeSlot: "",
  startTime: "",
  endTime: "",
})
const emit = defineEmits(["search"]);

const onChange = (type, event) => {
  if(type == 'time') {
    let {start, end} = Helper.formatQueryDate(type);
    state['startTime'] = start;
    state['endTime'] = end;
    doSearch();
    return;
  }

  state[type] = event;
  doSearch();
}

const onSearch = () => {
  doSearch();
}

const doSearch = () => {
  let data = {keyword: state.keyword, status: state.status};
  emit("search", data)
}


</script>

<style scoped lang="less">
.x-search {
  position: fixed;
  width: 100%;
  height: 200rpx;
  top: 0;
  .header {
    background-color: #FFFFFF;
  }

  .select-item {
    color: #999999;
    font-size: 28rpx;
    padding: 20rpx 0;
    box-sizing: border-box;
  }
}
</style>
